---
title: Ikony
image: /images/user-guide/objects/objects.png
---

<Frame>
  <img src="/images/user-guide/objects/objects.png" alt="Header" />
</Frame>

Lista ikon używanych w naszej aplikacji.

## Ikony Tabler

W całej aplikacji używamy ikon Tabler dla Reacta.

<Tabs>

<Tab title="Installation"><br/>

```
yarn add @tabler/icons-react
```

</Tab>

<Tab title="Props">

Możesz importować każdą ikonę jako komponent. Here's an example: <br />

```jsx
import { IconArrowLeft } from "@tabler/icons-react";

export const MyComponent = () => {
  return <IconArrowLeft color="red" size={48} />;
};
```

</Tab>

<Tab title="Props">

| Właściwości (Props) | Typ         | Opis                                   | Domyślny     |
| -------------------------------------- | ----------- | -------------------------------------- | ------------ |
| rozmiar                                | numer       | Wysokość i szerokość ikony w pikselach | 24           |
| kolor                                  | ciąg znaków | Kolor ikon                             | currentColor |
| obrys                                  | numer       | Szerokość obrysu ikony w pikselach     | 2            |

</Tab>

</Tabs>

## Ikony niestandardowe

Oprócz ikon Tabler, aplikacja używa również niektórych niestandardowych ikon.

### Ikona Książki Adresowej

Wyświetla ikonę książki adresowej.

<Tabs>

<Tab title="Usage">

```jsx
import { IconAddressBook } from 'twenty-ui/display';

export const MyComponent = () => {
  return <IconAddressBook size={24} stroke={2} />;
};
```

</Tab>

<Tab title="Props">

| Właściwości (Props) | Typ   | Opis                                   | Domyślny |
| -------------------------------------- | ----- | -------------------------------------- | -------- |
| rozmiar                                | numer | Wysokość i szerokość ikony w pikselach | 24       |
| obrys                                  | numer | Szerokość obrysu ikony w pikselach     | 2        |

</Tab>

</Tabs>
